<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Chat</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
        }

        #chatbox {
            flex-grow: 1;
            border: 1px solid #ccc;
            overflow-y: auto;
            margin: 20px;
            padding: 10px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .message {
            margin-bottom: 10px;
            border-radius: 5px;
            padding: 5px;
            line-height: 1.5;
            display: flex;
            flex-direction: column;
        }

        .message.user {
            align-items: flex-end;
        }

        .message.ai {
            align-items: flex-start;
        }

        .bubble {
            background-color: #d9edf7;
            border-radius: 10px;
            padding: 10px;
            position: relative;
            max-width: 70%;
            display: inline-block;
        }

        .bubble.ai {
            background-color: #dff0d8;
        }

        .name {
            font-weight: bold;
            display: block;
        }

        #message {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin: 0 20px;
            flex-grow: 1;
        }

        #send {
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin: 0 20px;
        }

        #send:hover {
            background-color: #45a049;
        }

        #input-area {
            display: flex;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div id="chatbox">
    <!-- Chat messages will be added here -->
</div>
<div id="input-area">
    <input id="message" type="text" placeholder="Type your message here...">
    <button id="send">Send</button>
</div>

<script>
    var sessionId = Date.now() + Math.random().toString(36).substr(2, 9);
    sessionStorage.setItem('sessionId', sessionId);

    document.getElementById("send").addEventListener("click", function () {
        sendMessage();
    });

    document.getElementById("message").addEventListener("keydown", function (e) {
        if (e.key === 'Enter' && e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    });

    function sendMessage() {
        var msg = document.getElementById("message").value;

        // User's message
        var msgDiv = document.createElement("div");
        var nameDiv = document.createElement("div");
        var bubbleDiv = document.createElement("div");

        msgDiv.className = "message user";
        nameDiv.textContent = "YOU";
        nameDiv.className = "name user";
        bubbleDiv.textContent = msg;
        bubbleDiv.className = "bubble user";

        msgDiv.appendChild(nameDiv);
        msgDiv.appendChild(bubbleDiv);
        document.getElementById("chatbox").appendChild(msgDiv);
        scrollToBottom();

        // var timestamp = Math.floor(Date.now() / 1000); // Current timestamp in seconds
        // var token = btoa("" + timestamp); // Base64 encoded hash of appSecret and timestam

        // Send the message to the server

        let apiUrl;
        if (window.location.hostname === 'prophet.feeyo.com') {
            apiUrl = 'http://prophet.feeyo.com/api/chat/dialogue';
        } else {
            apiUrl = 'http://localhost:8080/api/chat/dialogue';
        }
        fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Accept': 'text/event-stream',
                'Content-Type': 'application/json',
                'appId': '10000',
                'timestamp': '1709538875',
                'token': '0dd9697a6b8e2d6d7d0634da9c0696c6'
            },
            body: JSON.stringify({
                conversationId: sessionStorage.getItem("sessionId"),
                input: msg
            })
        })
            .then(response => {
                if (response.ok) {
                    return response.text();
                } else {
                    throw new Error('Network response was not ok');
                }
            })
            .then(data => {
                // AI's response
                var msgDiv = document.createElement("div");
                var nameDiv = document.createElement("div");
                var bubbleDiv = document.createElement("div");

                msgDiv.className = "message ai";
                nameDiv.textContent = "AI";
                nameDiv.className = "name ai";
                bubbleDiv.textContent = data.replace("data:", "");
                bubbleDiv.className = "bubble ai";

                msgDiv.appendChild(nameDiv);
                msgDiv.appendChild(bubbleDiv);
                document.getElementById("chatbox").appendChild(msgDiv);
                scrollToBottom();
            })
            .catch(error => {
                console.error('There has been a problem with your fetch operation:', error);
            });

        document.getElementById("message").value = "";
    }

    function scrollToBottom() {
        chatbox.scrollTop = chatbox.scrollHeight;
    }
</script>
</body>
</html>
